// div .td-sidebar__search {
//   padding-top: 2.5rem;
// }

.breadcrumb {
  font-size: 1.05rem;
  line-height: .925rem;
  padding: 0;
}

// div .td-toc {
//   padding-top: 2rem;
// }

// @media (min-width:768px) and (max-width:995px) {
//   div .td-sidebar__search {
//     padding-top: 2.5rem;
//     margin-top: 1rem;
//   }
// }

// @media (min-width: 768px) {
//   .td-navbar {
//     position: fixed;
//     top: 0;
//     width: 100%;
//     padding: .8vw 4vw !important;
//     background: var(--background-light-cards);
//     box-shadow: var(--box-shadow-navbar);
//   }
// }

// @media (min-width: 768px) {
//   .td-sidebar-nav {
//     max-height: -webkit-calc(100vh - 11.5rem);
//     max-height: calc(100vh - 11.5rem);
//     overflow-y: auto;
//   }
// }

//New Code ////////////////////////////////////////////////////////////////////////////////////////////////////

header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  grid-column: 1/-1;

  @media (max-width: 75em) {
    flex: 0 0 100%;
  }
  @media (max-width: 600px) {
    height: calc(var(--navbar-height) - 2.5rem);
  }
}

.navbar {
  width: 100%;
  height: var(--navbar-height);
  padding: 0 20px !important;
  background: var(--background-light-cards);
  box-shadow: var(--box-shadow-navbar);
  display: flex;
  align-items: center;
  z-index: 10;
  @media (max-width: 600px) {
    height: calc(var(--navbar-height) - 2.5rem);
  }
  & .nav-btn{
      background-color: var(--brand-color-secondary);
      color: var(--color-white);
      padding: 4px 8px;
      border-radius: 5px;
      border: 1px solid var(--brand-color-secondary);
  }
  
  @media (max-width: 1200px) {
    justify-content: space-between;
  }

  & .icon-container {
    display: flex;
    align-items: center;

    .nav-mode-icon {
      background: none;
      border: none;

      & > img {
        padding: 0 !important;
        margin-left: 10%;
        width: 2.2rem;
        height: 2.2rem;
        filter: var(--image-color);
        transition: filter 0.3s;
        cursor: pointer;
        @media (max-width: 600px) {
          width: 1.8rem;
          height: 1.8rem;
        }
      }

      @media (max-width: 1140px) {
        // margin-left: .5rem !important;
        // margin-top: .5rem !important;
      }

      @media (max-width: 840px) {
        // margin-left: 1rem !important;
        // margin-top: .5rem !important;
      }
    }

    & .nav-toggle-btn {
      border-radius: 100%;
      border: none;
      padding: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      // box-shadow: inset 3px 3px 7px #eff0f1, inset -3px -3px 2px #fff;
      display: none;
      background: none;

      @media (max-width: 1200px) {
        display: flex;
      }
      @media (max-width: 600px) {
        & #menu-nav-toggle-btn {
          width: 1.8rem;
          height: 1.8rem;
        }
      }

      &:hover,
      &:active,
      &:focus {
        outline: none;
      }
    }

    & #document-nav-toggle-btn {
      width: 1.8rem;
      height: 1.8rem;
      fill: var(--color-secondary-dark);
    }

    & #menu-nav-toggle-btn {
      width: 2.2rem;
      height: 2.2rem;
      stroke: var(--color-secondary-dark);
    }
  }

  & .navbar-brand {
    display: inline-block;
    font-size: 2.2rem;
    line-height: inherit;
    white-space: nowrap;

    & > .navbar-logo {
      display: flex;
      align-items: center;

      // @media (max-width: 1200px) {
      //   font-size: 2rem;
      // }

      // @media (max-width: 600px) {
      //   justify-content: center;
      //   flex-direction: column;

      //   & > span {
      //     margin-left: .5rem;
      //   }
      // }

      & img,
      svg {
        display: inline-block;
        height: 45px;
        margin-right: 0.5rem;
        @media (max-width: 610px) {
          height: 36px;
        }
        @media (max-width: 475px) {
          display: none;
        }
      }

      // & > span {
      //   font-weight: 600 !important;
      //   color: var(--color-secondary-medium);
      // }
    }

    & > .mobile {
      display: flex;
      align-items: center;
      & img,
      svg {
        display: none;
        @media (max-width: 475px) {
          display: inline-block;
          height: 45px;
        }
      }
    }
  }

  @media (max-width: 1200px) {
    & .main-navbar--active {
      transform: translateX(0) !important;
      box-shadow: var(--box-shadow-primary-left);
    }
  }

  & #main_navbar {
    overflow: hidden;
    font-size: 1.2rem;
    margin-left: auto !important;

    @media (max-width: 1200px) {
      position: fixed;
      top: calc(var(--navbar-height) - 2.5rem);
      right: 0;
      width: max(20vh, 25vw);
      height: calc(100vh - var(--navbar-height));
      z-index: 9;
      transform: translateX(100%);
      transition: all 0.5s ease-in-out;
    }

    & .navbar-nav {
      white-space: nowrap;
      display: flex;
      flex-direction: row;
      gap: 2rem;
      list-style: none;
      align-items: center;
      margin-bottom: 0;
      @media (max-width: 1200px) {
        width: 100%;
        background: var(--background-grey);
        flex-direction: column;
        height: 100%;
        padding: 2rem 1.8rem;
      }

      & .nav-item {
        color: var(--color-secondary-medium);
        position: relative;

        @media (max-width: 1200px) {
          width: fit-content;
        }

        & a > * {
          color: var(--color-secondary-dark);
        }

        & a:hover {
          text-decoration: none;
          &::after {
            width: 100%;
          }
        }

        & a::after {
          content: "";
          width: 0px;
          height: 0.3rem;
          bottom: -3px;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
          background: var(--background-primary);
          transition: all 0.3s;
        }
      }

      & select {
        font-size: inherit;
        font-weight: 400;
        border: 1px solid var(--color-grey-light);
        border-radius: 3px;
        background: var(--background-light);
        padding: 5px;
        cursor: pointer;
        & > * {
          background: var(--color-primary-dark);
        }
      }
    }
  }
}

